<!--
 * @Author: 哈尔滨大拐 3181845089@qq.com
 * @Date: 2022-07-13 11:09:21
 * @LastEditors: 哈尔滨大拐 3181845089@qq.com
 * @LastEditTime: 2022-08-07 19:32:10
 * @FilePath: \mygit\实验\20-进度条2.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #progress {
            width: 0%;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div id="progress">0%</div>
    <button id="btn" onclick="progressStart()">run</button>

    <script>

        const progress = document.querySelector('#progress')


        // 用setTimeout实现setInterval
        function progressStart() {
            let count = 0
            function mySetInterval(callback, timeout, times) {
                setTimeout(() => {
                    if (times <= 0) { return }
                    callback()
                    mySetInterval(callback, timeout, --times)
                }, timeout);
            }
            mySetInterval(go, 10, 100)

            function go() {
                count++
                progress.innerHTML = count + '%'
                progress.style.width = count + '%'
            }
        }


        // removeEventListener
        // function progressStart() {
        //     let count = 0
        //     function fn2() {

        //         count++
        //         progress.innerHTML = count + '%'
        //         progress.style.width = count + '%'

        //         if (count < 100) {
        //             requestAnimationFrame(fn2)
        //         }
        //     }
        //     fn2()
        // }

        // function progressStart(){
        //     setTimeout(() => {
        //         count++
        //     }, 10);
        // }

    </script>
</body>

</html>